<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>录入客户信息</title>
    <style>
        body,html{
            margin: 0;
        }
        *{
            box-sizing: border-box;
        }
        .submenu{
            position: absolute;
            right: 0px;
            top: 48px;
            right:0px;
            display: none;
        }
        .submenu section{
            background-color:#2f353a;
            padding: 15px;
        }
        header{
            background-color: #4a5259;
            color: aliceblue;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            align-items: center;
        }
        nav{
            display: flex;
            justify-content: center;
        }
        nav a {
            padding: 15px;
            color: aliceblue;
            text-decoration: none;
            display: block;    
        }
        .welcome {
            position: relative;
            display: flex;
            align-items: center;
        }
        .welcome:hover .submenu{
            display: block;
        }
        .underline {
            height: 0px;
            width: 100%;
            border-bottom: 3px solid #f3c244;
            position: absolute;
            top: 40px;
            left: 0px;
        }
        .subnav:hover .underline{
            display: block;
        }
        .subnav {
            border-bottom: #E29836 solid 4px;
            position: relative;
        }
        .btn-danger{
            background-color: #f26161;
            color: white;
            border: 0;
            padding: 8px 20px;
            border-radius: 4px;
        }
        .btn-danger:hover{
            background-color: #df3737;
        }
        .form-container{
            width: 500px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 15px;
        }
        .form-item{
            display: flex;
            align-items: center;
            margin: 15px;
        }
        .item-box{
            flex: 1;
        }
        input{
            width: 100%;
            padding: 8px;
        }
        .form-item-label{
            width: 7em;
        }
        .btn-primary{
            background-color: #3894ff;
            color: white;
            border: 0;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn-primary:hover{
            background-color: #2380eb;
        }

    </style>
</head>
<body>
    <!--顶部-->
    <header>
        <!--导航栏-->
        <nav>
            <section>
                <a href="#">GRTS-MMS</a>
            </section>
            <section>
                <a href="#">仪表板</a>
            </section>
            <section class="subnav">
                <a href="#">录入客户信息</a>
            </section>
            <section>
                <a href="#">查看客户信息</a>
            </section>
        </nav>
        <!--用户信息-->
        <div class="welcome">
            <svg style="padding: 15px;" t="1671174307223" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2634" width="16" height="16"><path d="M642.8 531.8c64.3-42.6 106.9-115.4 106.9-198.1C749.7 202.6 643.1 96 512 96S274.3 202.6 274.3 333.7c0 82.7 42.6 155.6 106.9 198.1C215.8 582.9 96 727.7 96 898.3c0 16.4 13.3 29.7 29.7 29.7s29.7-13.3 29.7-29.7c0-180.2 159.9-326.9 356.6-326.9 196.6 0 356.6 146.6 356.6 326.9 0 16.4 13.3 29.7 29.7 29.7s29.7-13.3 29.7-29.7c0-170.6-119.8-315.4-285.2-366.5zM333.7 333.7c0-98.3 80-178.3 178.3-178.3s178.3 80 178.3 178.3S610.3 512 512 512s-178.3-80-178.3-178.3z" fill="#e6e6e6" p-id="2635"></path></svg>
            <span style="padding: 15px;">欢迎您，Lucy</span>
            <svg style="padding: 15px;" t="1671174392067" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3863" width="16" height="16"><path d="M966.4 323.2c-9.6-9.6-25.6-9.6-35.2 0l-416 416-425.6-416c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l441.6 432c9.6 9.6 25.6 9.6 35.2 0l435.2-432C976 345.6 976 332.8 966.4 323.2z" p-id="3864" fill="#e6e6e6"></path></svg>
            <!--二级菜单-->
            <div class="submenu">
                <section>修改密码</section>
                <section>退出系统</section>
            </div>
        </div>
    </header>
    <!--工作区-->
    <div>
        <!--提示栏-->
        <div style="background-color: #FDF5E9; padding: 15px;">
            <span style="color: #E29836;">录入客户信息之前，建议查重，以免造成您和同事之间的业务冲突！</span>
            <button class="btn-danger">立即查重</button>
        </div>
        <!--表单-->
        <form class="form-container" action="">
            <div class="form-item">
                <label class="form-item-label" for="">客户名称</label>
                <div class="item-box">
                    <input type="text" class="input">
                </div>
            </div>
            <div class="form-item">
                <label class="form-item-label" for="">客户性别</label>
                <div class="item-box">
                        <input style="width: 15px;" type="radio" name="gender" checked>男
                        <input style="width: 15px;" type="radio" name="gender">女
                </div>
            </div>
            <div class="form-item">
                <label class="form-item-label" for="">客户地址</label>
                <div class="item-box">
                    <input type="text">
                </div>
            </div>
            <div class="form-item">
                <label class="form-item-label" for="">联系电话</label>
                <div class="item-box">
                    <input type="text">
                </div>
            </div>
            <div class="form-item">
                <label class="form-item-label" for="">客户来源</label>
                <select name="" id="">
                    <option value="">口碑</option>
                    <option value="">新媒体</option>
                    <option value="">地推活动</option>
                </select>
            </div>
            <div class="form-item">
                <label class="form-item-label" for="">客户状态</label>
                <select name="" id="">
                    <option value="">意向不明</option>
                    <option value="">有意向</option>
                    <option value="">成交</option>
                </select>
            </div>
            <div class="form-item">
                <label class="form-item-label" for="">最后跟进日期</label>
                <div class="item-box">
                    <input type="date" class="input">
                </div>
            </div>
            <div class="form-item">
                <label class="form-item-label" for="">最后跟进情况</label>
                <div class="item-box">
                    <textarea class="input" name="" id="" rows="3"></textarea>
                </div>
            </div>
            <div class="form-item">
                <label class="form-item-label" for=""></label>
                <button class="btn-primary">保 存</button>
            </div>  
        </form>
    </div>
</body>
</html>